<template>
    <div>
        <div>
            <el-breadcrumb separator="/" style="margin: 8px;">
                <el-breadcrumb-item>预警结果数据</el-breadcrumb-item>
                <el-breadcrumb-item>供应链预警</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <h3>供应链预警</h3>
            <div style="margin-top: 20px;">
                <el-form :inline="true" ref="query" :model="query">
                    <el-form-item label="创建时间" label-width="70px">
                        <el-date-picker v-model="query.createTime" class="common-input" type="datetimerange"
                            range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="版本号" label-width="60px">
                        <el-input v-model="query.version" clearable class="common-width"
                            placeholder="请输入版本号"></el-input>
                    </el-form-item>
                    <el-form-item label="组件" label-width="60px">
                        <el-input v-model="query.name" clearable class="common-width" placeholder="请输入组件"></el-input>
                    </el-form-item>
                    <el-form-item label="生态" label-width="60px">
                        <el-input v-model="query.ecology" clearable class="common-width" placeholder="请输入生态"></el-input>
                    </el-form-item>
                    <el-form-item class="leftmargin">
                        <el-button type="primary" @click="getData">确定</el-button>
                        <el-button @click="handleClean">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="tableData" class="table" align="center" stripe ref="table">
                <!-- <el-table-column prop="uid" align="center" width="120" label="序号"></el-table-column> -->
                <el-table-column prop="version" align="center" label="版本号"></el-table-column>
                <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
                <el-table-column prop="name" align="center" label="组件">
                    <template slot-scope="scope">
                        {{ scope.row.component }}
                    </template>
                </el-table-column>
                <el-table-column prop="ecology" align="center" label="生态">
                    <template slot-scope="scope">
                        {{ scope.row.ecology }}
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="communityEngagement" align="center" label="社区热度">
                    <template slot-scope="scope">
                        {{ scope.row.communityEngagement.score }}
                    </template>
                </el-table-column> -->
                <el-table-column prop="healthyPoint" align="center" label="健康评分">
                    <template slot-scope="scope">
                        {{ scope.row.healthyPoint.score }} {{ scope.row.healthyPoint.level }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="120px">
                    <template slot-scope="scope">
                        <el-button type="text" class="blue" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            query: {
                createTime: '',
                version: '',
                name: "",
                ecology: '',
                pageNum: 1,
                pageSize: 10,
            },
            tableData: [],
            pageTotal: 0,

        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            let query = Object.assign({}, this.query);
            if (this.query.createTime != '' && this.query.createTime.length > 1) {
                query.createTime = this.query.createTime[0];
                query.completedTime = this.query.createTime[1];
                delete query[0];
                delete query[1];
            }
            console.log(query)
            this.$http.fetchGet('api/warnMessage/list', query).then(res => {
                res.forEach(item => {
                    item.healthyPoint = JSON.parse(item.healthyPoint.replace(/^["']|["']$/g, '').replace('/', ''));
                    item.securityRisk = JSON.parse(item.securityRisk.replace(/^["']|["']$/g, '').replace('/', ''));
                    item.versionMaintenance = JSON.parse(item.versionMaintenance.replace(/^["']|["']$/g, '').replace('/', ''));
                    item.impactScope = JSON.parse(item.impactScope.replace(/^["']|["']$/g, '').replace('/', ''));
                    item.communityEngagement = JSON.parse(item.communityEngagement.replace(/^["']|["']$/g, '').replace('/', ''));
                })
                this.tableData = res;
                this.pageTotal = res.length;
            }).catch(err => {
                let res = [{
                    "id": 1,
                    "healthyPoint": "{\"level\": \"高危\", \"score\": 9.18}",
                    "securityRisk": "{\"index\": [\"most_cvss\", \"direct_vul_num\", \"shortest_num\", \"undirect_vul_num\", \"top5_cvss\", \"top5_path\"], \"score\": 9.18, \"description\": [[\"直接感染漏洞的最高cvss评分为 0.0 ，无风险；\", \"组件无直间接感染漏洞；\", \"top5直接感染漏洞的cvss平均分为 0.0 ，无风险；\", \"top5直接感染漏洞的平均依赖度数为 0.0 ，离漏洞较近；\"]]}",
                    "impactScope": "{\"index\": [\"dependent_num\", \"github_fork\", \"github_star\"], \"score\": 9.5, \"description\": [[\"组件下游依赖数有 1 个，该组件热度较低；\", \"组件无Github项目链接，无star数量、fork数量\"]]}",
                    "versionMaintenance": "{\"index\": [\"version_days\", \"newest_days\", \"version_type\", \"closed_issues\", \"issue_time_days\"], \"score\": 8.1, \"description\": [[\"组件的该版本更新时间距今 1000 天，大于一年，版本较老；\", \"组件的最新版本更新时间距今 1000 天，该组件已超过一年未更新；\", \"组件该版本为补丁版本更新；\", \"组件无Github项目链接，无近一个月closed_issues数量，上次issue距今天数；\"]]}",
                    "communityEngagement": "{\"index\": [\"contributor\", \"readme_md\", \"contributing_md\"], \"score\": 10.0, \"description\": [[\"组件无GitHub项目链接、贡献者数量、readme_md文件、contributing_md文件等数据；\"]]}",
                    "createTime": "2024-06-03 11:59:03",
                    "component": null,
                    "ecology": null,
                    "version": "some_version"
                },
                {
                    "id": 2,
                    "healthyPoint": "{\"level\": \"未知\", \"score\": 0}",
                    "securityRisk": "{\"index\": [\"most_cvss\", \"direct_vul_num\", \"shortest_num\", \"undirect_vul_num\", \"top5_cvss\", \"top5_path\"], \"score\": 0, \"description\": [[]]}",
                    "impactScope": "{\"index\": [\"dependent_num\", \"github_fork\", \"github_star\"], \"score\": 0, \"description\": [[\"组件下游依赖数有 0 个，该组件热度较低；\", \"组件无Github项目链接，无star数量、fork数量\"]]}",
                    "versionMaintenance": "{\"index\": [\"version_days\", \"newest_days\", \"version_type\", \"closed_issues\", \"issue_time_days\"], \"score\": 0, \"description\": [[\"组件的该版本更新时间距今 0 天，小于半年，为新版本；\", \"组件的最新版本更新时间距今 0 天，该组件半年内有更新；\", \"组件无Github项目链接，无近一个月closed_issues数量，上次issue距今天数；\"]]}",
                    "communityEngagement": "{\"index\": [\"contributor\", \"readme_md\", \"contributing_md\"], \"score\": 0, \"description\": [[\"组件无GitHub项目链接、贡献者数量、readme_md文件、contributing_md文件等数据；\"]]}",
                    "createTime": "2024-06-14 16:52:39",
                    "component": "github.com/rai-project/dlframework",
                    "ecology": "Go",
                    "version": "v0.2.23-0.20180803211046-0bf83e30cbf8"
                }
                ];
                res.forEach(item => {
                    item.healthyPoint = JSON.parse(item.healthyPoint.replace(/^["']|["']$/g, '').replace('/', ''));
                    item.securityRisk = JSON.parse(item.securityRisk.replace(/^["']|["']$/g, '').replace('/', ''));
                    item.versionMaintenance = JSON.parse(item.versionMaintenance.replace(/^["']|["']$/g, '').replace('/', ''));
                    item.impactScope = JSON.parse(item.impactScope.replace(/^["']|["']$/g, '').replace('/', ''));
                    item.communityEngagement = JSON.parse(item.communityEngagement.replace(/^["']|["']$/g, '').replace('/', ''));
                })
                this.tableData = res;
                this.pageTotal = this.tableData.length;
            })

        },
        // 触发重置按钮
        handleClean() {
            this.query = {
                createTime: '',
                version: '',
                name: "",
                ecology: '',
                pageNum: 1,
                pageSize: 10,
            }
            this.getData();
        },
        trimQuotes(str) {
            return str.replace(/^["']|["']$/g, '');
        },
        // 编辑操作
        handleEdit(index, row) {
            this.$sendLog({
                operateFuncName: "供应链预警",
                operateFuncKey: "Supply Chain Alert",
                operateInfo: "查看详情",
                operateKey: "view",
            })
            this.$router.push({ path: '/firstDetail', query: { id: row.id } });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageNum', val);
            this.getData();
        },
    }
};
</script>

<style scoped>
.common-width {
    width: 180px;
}

.common-select {
    width: 350px;
}

.common-input {
    width: 350px;
}

.small-input {
    width: 225px;
}

.table {
    width: 100%;
    font-size: 14px;
}

.green {
    color: #67c23a;
}

.blue {
    color: #2468F2;
}

.origin {
    color: #ff7300;
}

.red {
    color: #f56c6c;
}

.leftmargin {
    margin-left: 10px;
}

.mr10 {
    margin-right: 10px;
}

.form>>>.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
</style>
